<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%--
  Created by IntelliJ IDEA.
  User: 18134216985
  Date: 2024-04-26
  Time: 15:00
  To change this template use File | Settings | File Templates.
--%>
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="/webjars/layui/2.6.8/css/layui.css">
    <script src="/webjars/layui/2.6.8/layui.js"></script>
</head>
<body>
<%--条件查询--%>
<div class="layui-collapse">
    <div class="layui-colla-item">

        <h2 class="layui-colla-title">查询条件</h2>
        <div class="layui-colla-content layui-show">
            <div class="layui-form"  id="searchForm" lay-filter="searchForm">
                <div class="layui-inline">
                    <select name="parkid" id="">
                        <option value="0">请选择停车场</option>
                    </select>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" onclick="search()" >查询</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="start" style="display:none;padding:20px">
    <form class="layui-form" id="startForm" lay-filter="startForm">
        <div class="layui-form-item">
            <label class="layui-form-label">姓名:</label>
            <div class="layui-input-block">
                <input type="text" name="name" required  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">联系方式:</label>
            <div class="layui-input-block">
                <input type="text" name="phone" required  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">车位编码:</label>
            <div class="layui-input-block">
                <input type="text" name="parkingcode" disabled="disabled" required  class="layui-input">
            </div>
        </div>
        <input type="hidden" name="parkid" required disabled="disabled"  class="layui-input">
       <input type="hidden" name="parkinglotid" required disabled="disabled"  class="layui-input">

        <div class="layui-form-item">
            <label class="layui-form-label">停车场：</label>
            <div class="layui-input-block">
                <input type="text" name="parkcode" disabled="disabled" required  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">计费规则:</label>
            <div class="layui-input-block">
                <select name="ruleid">
                    <option value="0">请选择计费规则</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">车牌号:</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" name="carno">
            </div>
        </div>

    </form>
</div>
<%--开始停车按钮--%>
<script type="text/html" id="stopCarbtn">
    <button class='layui-btn layui-btn-sm layui-btn-danger' lay-event='startbtn'>停车</button>
</script>
<%--离开按钮--%>
<script type="text/html" id="leavebtn">
    <button class='layui-btn layui-btn-sm layui-btn-normal' lay-event='leavebtn'>离开</button>
</script>
<h3>空置车位</h3>
<br>
<table class="layui-hide" id="parkLottable-demo-data" lay-filter="ParkLotTable"></table>
<h3>我占用的车位</h3>
<br>
<table class="layui-hide" id="selfparkLottable-demo-data" lay-filter="selfParkLotTable"></table>
<script>
    let $=layui.$
    let table = layui.table;
    layui.use(["table","laydate"],function (){
        table.render({
            id:'parkingLot',
            elem:'#parkLottable-demo-data',
            url:"/ParkingLotInfo/SelectAllLinShiParkingLot",
            page:true,
            cols:[[
                {field:'number',align: 'center',type:'numbers',title:"编号"},
                {field:'id',align: 'center',hide:true,title:"序号"},
                {align: 'center',field: 'parkingcode',title: '车位编号'},
                {align: 'center',field: 'parkingstateid',title: '车位状态',templet(d) {
                        return d.parkingstate==null?"-":d.parkingstate.parstatename;
                    }},
                {align: 'center',field: 'parkid',title: '停车场',templet(d){
                        return d.park==null?"-":d.park.parkcode;
                    }},
                {align: 'center',title:'操作',toolbar:"#stopCarbtn"},
            ]]
        })

    })
    //点击查询
    function search(){
        var search=layui.form.val('searchForm');
        layui.table.reload('parkingLot', {
            page: {
                curr:1
            },
            where: search
        });
    }
    table.on("tool(ParkLotTable)",function (obj){
        if(obj.event=="startbtn"){
            starts(obj);
        }
    })
    /*渲染下拉列表停车位*/
    $.get("/park/selectAllPark").then(({data})=>{
        $(data).each(function (i,e){
            let option=$("<option value='"+e.id+"'>"+e.parkcode+"</option>")
            $("[name=parkid]").append(option)
        })
        layui.form.render('select')
    })
    /*渲染汽车下拉列表*/
    $.get("/Vehicle/selectVehicleService?ownerid="+${sessionScope.loginUser.id}).then(({data})=>{
        $(data).each(function (i,e){
            let option=$("<option value='"+e.id+"'>"+e.carno+"</option>")
            $("[name=carid]").append(option)
        })
        layui.form.render('select')
    })
    /*渲染下拉列表计费规则*/
    $.get("/ParkRule/selectAllParkRule").then(({data})=>{
        $(data).each(function (i,e){
            let option=$("<option value='"+e.id+"'>"+e.rulename+"</option>")
            $("[name=ruleid]").append(option)
        })
        layui.form.render('select')
    })
    function starts(obj){
        $("#startForm")[0].reset();
        layui.form.val('startForm',obj.data);

        $("[name=parkcode]").val(obj.data.park.parkcode);
        $("[name=parkid]").val(obj.data.park.id);
        $("[name=parkinglotid]").val(obj.data.id);
        layui.form.render('select');
        layui.layer.open({
            type:1,
            title:"开始停车",
            content:$("#start"),
            area:["500px","550px"],
            btn:["确定","取消"],
            yes(){
                if($("[name=ruleid]").val()==0){
                    layui.layer.msg("请选择计费规则")
                    return;
                }else
                if($("[name=carno]").val()==0){
                    layui.layer.msg("请选择车辆")
                    return;
                }else
                if($("[name=name]").val()==null ||$("[name=name]").val()==''){
                    return;
                }else
                if($("[name=phone]").val()==null ||$("[name=phone]").val()==''){
                    return;
                }
                else if($("[name=carno]").val()==null || $("[name=carno]").val()==''){
                    return;
                }
                else {
                    let startform=layui.form.val("startForm");
                    $.post("/temporaryCar/addStrangeCar",startform).then(({msg})=>{
                        layui.layer.close(layui.layer.index);
                        layui.layer.msg(msg);
                        layui.table.reload('parkingLot')
                        layui.table.reload('selfparkingLot')
                    })

                    $.post("/ParkingLotInfo/updateParkingLotStateById?id="+obj.data.id).then(({msg})=>{
                        layui.table.reload('parkingLot')
                        layui.table.reload('selfparkingLot')
                    })
                }
            }

        })
    }
    /*-----------------------------------------开始停车表---------------------------------*/
    layui.use(["table","laydate"],function (){
        table.render({
            id:'selfparkingLot',
            elem:'#selfparkLottable-demo-data',
            url:"/temporaryCar/selectAllStrangeCar",
            page:true,
            cols:[[
                {field:'number',align: 'center',type:'numbers',title:"编号"},
                {field:'id',align: 'center',hide:true,title:"序号"},
                {align: 'center',field: 'name',title: '姓名'},
                {align: 'center',field:'phone',title:'联系方式'},
                {align: 'center',field:'parkinglotid',title:'车位',templet(d){
                    return d.parkinglot==null?"-":d.parkinglot.parkingcode;
                    }},
                {align: 'center',field:'parkid',title:'停车场',templet(d) {
                        return d.park==null?"-":d.park.parkcode;
                    }},
                {align: 'center',field:'carno',title:'车牌号'},
                {align: 'center',field:'starttime',title:'开始时间'},
                {align: 'center',field:'ruleid',title:'单价',templet(d) {
                        return d.parkrule==null?"-":d.parkrule.money;
                    }},
                {align: 'center',title:'操作',toolbar:"#leavebtn"},
            ]]
        })

    })
    //离开
    table.on("tool(selfParkLotTable)",function (obj){
        if(obj.event=="leavebtn"){
            leaves(obj);
        }
    })
    function leaves(obj){
        console.log(obj.data)
        $.post("/temporaryCar/deleteStrangeCarById?id="+obj.data.id).then(({msg})=>{

        })
        $.ajax({
            url:"/temporaryCar/addTrafficrecords",
            type: "post",
            data:JSON.stringify(obj.data),
            dataType:"json",
            contentType:"application/json;charset=utf-8",
            success:function (data){

            }
        })
        $.ajax({
            url:"/temporaryCar/addStopCarMoney",
            type: "post",
            data:JSON.stringify(obj.data),
            dataType:"json",
            contentType:"application/json;charset=utf-8",
            success:function (data){

            }
        })
        $.post("/temporaryCar/updateParklotState?id="+obj.data.parkinglot.id).then(({msg})=>{
            layui.layer.msg(msg)
            layui.table.reload('parkingLot')
            layui.table.reload('selfparkingLot')
        })


    }
</script>

</body>
</html>
